<!-- 页头 -->
<ion-header>
  <ion-toolbar>
    <img [src]="imgurl+'images/index/tdd2.png'" slot="start" width="30%" style="diaplay:inline-block;margin:0 5px">
    <ion-searchbar slot="end" no-padding style="height:45px;" placeholder="请输入要搜索的商品">

    </ion-searchbar>
  </ion-toolbar>
</ion-header>
<!-- 页面主体 slides+grid+card -->
<ion-content>
  <!-- 轮播广告1 pager="true"控制圆点-->
  <ion-slides #mySlides pager="true" [options]="slideOpts">
    <ion-slide *ngFor="let c of carouselItems">
      <img [src]="imgurl+c.img" alt="">
    </ion-slide>
  </ion-slides>
  <!-- 轮播广告2-->
  <!-- 导航列表图片1 -->
  <ion-grid>
    <ion-row>
      <ion-col size="3"  *ngFor="let b of kinds" >
        <div class="icon-box">
          <img [src]="imgurl+b.img" width="40%">
          <p class="pink" >{{b.kind_name}}</p>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
  <!-- 导航列表图片2 -->
  <!-- 首页循环商品列表1 -->
  <div *ngFor="let a of kinds1;let i=index" >
    <img [src]="imgurl+a.Mimg" alt="">
    <!-- 1F商品1 -->
    <!-- 1楼商品标题列1 -->
    <ion-item ng-init="index1=$index">
        <img [src]="imgurl+a.img"  width="8%" slot="start">
        <ion-label>
          <h5>{{a.kind_name}}</h5>
        </ion-label>
    </ion-item>
    <!-- 1楼商品标题列2 -->
    <ion-grid>
      <ion-row ng-bind="i=index">
        <ion-col size="6" *ngFor="let p of [product1,product2,product3,product4,product5][i]"   no-padding style="padding:3px;">
          <ion-card  no-padding no-margin style="padding:10px;">
            <img [src]="imgurl+p.index_img" alt="">
            <ion-card-header no-padding >
              <ion-card-title  class="card_title ">
                {{p.index_title}}</ion-card-title>
            </ion-card-header>
            <ion-card-content no-padding  style="font-size:12px;text-align: center">
              价格:{{p.index_price | currency:'￥'}}
              <!-- <ion-button size="small">查看详情</ion-button> -->
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
    <!-- 1F商品2 -->
</div>
<!-- 首页循环商品列表1 -->
</ion-content>